<app-page-container maintitle="Locations" subtitle="Manage locations in your account">
  <a class="btn btn-primary add-button" routerLink="../location/new" action-button translate>Add New Location</a>
  <div ngx-sidebar-off class="table-responsive iot-table">
    <table class="table app-devices-table">
      <thead>
        <tr>
          <th translate class="text-center w-150">Image</th>
          <th translate>Location name</th>
          <th translate>Level</th>
          <th class="action-column" translate>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let location of locations" class="app-devices-row">
          <td><img width='125px' [src]="location.icon" [alt]="location.name"></td>
          <td>{{location.name | translate}}</td>
          <td>{{location.level}}</td>
          <td>
            <a [routerLink]="'/locations/edit/' + location.id "><i [Tooltip]="'Edit' | translate" class="icon-mode_edit action-btn"></i></a>
            <a (click)="DeleteLocation(location.id)"><i [Tooltip]="'Delete' | translate" class="icon-delete action-btn"></i></a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</app-page-container>

<app-error-message *ngIf="locations.length === 0" >
  There are no locations. Please create locations and you will be able to manage them here.
</app-error-message>
